<div>
    <Create />
    <Editor :selects="selectedRows" />
    <Remove :selects="selectedRows" />
    <section class="section">
        <div class="container">
            <PageIntroduction :intro="page_intro" />
            <div class="row">
                <div class="col-12">
                    <div class="page-toolbar">
                        <div class="loading-layer" v-if="loading"></div>
                        <button type="button" class="btn btn-dark" @click="tableData()" :disabled="loading">
                            <i class="mdi mdi-refresh align-middle"></i>
                        </button>
                        <button type="button" class="btn btn-dark" @click="tableCreate()">
                            <i class="mdi mdi-shape-rectangle-plus align-middle"></i>
                            新建标签
                        </button>
                        <b-dropdown variant="dark" class="dropdown-dark">
                            <template v-slot:button-content>
                                <span class="mdi mdi-dots-horizontal align-middle"></span>
                                <span class="ml-2 mr-4">更多操作</span>
                            </template>
                            <b-dropdown-item :disabled="selectedRows.length != 1" @click="tableEditor">
                                <span class="icon mdi mdi-circle-edit-outline"></span>
                                <span class="text">编辑</span>
                            </b-dropdown-item>
                            <b-dropdown-item :disabled="selectedRows.length != 1" @click="tableRemove">
                                <span class="icon mdi mdi-close"></span>
                                <span class="text">删除</span>
                            </b-dropdown-item>
                        </b-dropdown>
                        <div class="form-group">
                            <input class="form-control" placeholder="搜索标签" @keydown.13="tableData()" v-model="search" />
                        </div>
                    </div>
                    <div class="card border-0">
                        <div class="card-body pt-0">
                            <a-table
                                class="text-norwap"
                                :scroll="{ x: true }"
                                :columns="table.cols"
                                :dataSource="table.rows"
                                :pagination="pagination"
                                :loading="loading"
                                :locale="locale"
                                :rowKey="records => records.id"
                                :rowSelection="{ onChange: tableOnSelect, selectedRowKeys: selectedRowKeys, }"
                                @change="tableChange"
                            >
                                <template slot="id" slot-scope="id">
                                    <span class="text-muted">{{ id }}</span>
                                </template>
                                <template slot="name" slot-scope="name, row">
                                    <span class="resource-labels" :style="'background: ' + row.color" v-if="row.color">{{ name }}</span>
                                    <span class="resource-labels" style="background: rgb(244, 106, 106);" v-if="!row.color">{{ name }}</span>
                                </template>
                                <template slot="creation_time" slot-scope="creation_time">
                                    <span class="text-muted">{{ creation_time | toLocalTime }}</span>
                                </template>
                            </a-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
